import React from 'react'
import { connect } from 'dva'
import { Card, Spin, Row, Col } from 'antd'

const ReturnValuationItem = ({ title = false, data }) => {
    const { field, list } = data
    console.log(9909, typeof (list[0].value));

    if (list.length) {
        return (
            <Card className="returnValuationItem" title={title} bordered={false}>
                <table>
                    <tbody>
                        <tr>
                            <td></td>
                            <td>
                                <table className="style">
                                    <tbody>
                                        <tr>
                                            <td>价值型</td>
                                            <td>平衡型</td>
                                            <td>成长型</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <table className="scale">
                                    <tbody>
                                        <tr>
                                            <td>大盘</td>
                                        </tr>
                                        <tr>
                                            <td>中盘</td>
                                        </tr>
                                        <tr>
                                            <td>小盘</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td>
                                <table className="gezi">
                                    <tbody>
                                        {/*<tr>
                                            <td>{typeof(list[0].value)==='number'?list[0].value.toPercent():list[0].value}</td>
                                            <td>{typeof(list[1].value)==='number'?list[1].value.toPercent():list[1].value}</td>
                                            <td>{typeof(list[2].value)==='number'?list[2].value.toPercent():list[2].value}</td>
                                        </tr>
                                        <tr>
                                        <td>{typeof(list[3].value)==='number'?list[3].value.toPercent():list[3].value}</td>
                                        <td>{typeof(list[4].value)==='number'?list[4].value.toPercent():list[4].value}</td>
                                        <td>{typeof(list[5].value)==='number'?list[5].value.toPercent():list[5].value}</td>
                                        </tr>
                                        <tr>
                                        <td>{typeof(list[6].value)==='number'?list[6].value.toPercent():list[6].value}</td>
                                        <td>{typeof(list[7].value)==='number'?list[7].value.toPercent():list[7].value}</td>
                                        <td>{typeof(list[8].value)==='number'?list[8].value.toPercent():list[8].value}</td>
                                        </tr>*/}
                                        <tr>
                                            <td><div className="gezitem">{typeof (list[0].value) === 'number' ? list[0].value.toPercent() : list[0].value}</div></td>
                                            <td><div className="gezitem">{typeof (list[1].value) === 'number' ? list[1].value.toPercent() : list[1].value}</div></td>
                                            <td><div className="gezitem">{typeof (list[2].value) === 'number' ? list[2].value.toPercent() : list[2].value}</div></td>
                                        </tr>
                                        <tr>
                                            <td><div className="gezitem">{typeof (list[3].value) === 'number' ? list[3].value.toPercent() : list[3].value}</div></td>
                                            <td><div className="gezitem">{typeof (list[4].value) === 'number' ? list[4].value.toPercent() : list[4].value}</div></td>
                                            <td><div className="gezitem">{typeof (list[5].value) === 'number' ? list[5].value.toPercent() : list[5].value}</div></td>
                                        </tr>
                                        <tr>
                                            <td><div className="gezitem">{typeof (list[6].value) === 'number' ? list[6].value.toPercent() : list[6].value}</div></td>
                                            <td><div className="gezitem">{typeof (list[7].value) === 'number' ? list[7].value.toPercent() : list[7].value}</div></td>
                                            <td><div className="gezitem">{typeof (list[8].value) === 'number' ? list[8].value.toPercent() : list[8].value}</div></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>

            </Card>)
    } else {
        return null
    }


}


/**
 * ReturnValuation 
 */
class ReturnValuation extends React.Component {
    state = {
        data: this.props.returnValuation,
    }
    componentDidMount() {
        this.fetchData(this.props)
    }
    componentWillReceiveProps(nextProps) {

        if ((nextProps.lPortId !== this.props.lPortId)) {
            this.fetchData(nextProps)
        }
        if (nextProps.returnValuation !== this.props.returnValuation) {
            this.setState({
                data: nextProps.returnValuation,
            })
        }
    }
    fetchData = (props) => {
        this.setState({
            data: {}
        })
        props.dispatch({
            type: 'combinatorialAnalysis/getReturnValuation',
            payload: props
        })
    }
    render() {

        return (
            <Card title="基金风格回报和估值" className="returnValuation">
                {
                    this.state.data.length ? (
                        <Row>
                            <Col span={16}>
                                <Row gutter={50}>
                                    {/*<Col span={10} offset={2}>*/}
                                    <Col span={12} style={{paddingLeft:56,paddingRight:10}}>
                                        <ReturnValuationItem {...this.state.data[0]} />
                                        <ReturnValuationItem {...this.state.data[2]} />
                                    </Col>
                                    <Col span={12}>
                                        <ReturnValuationItem {...this.state.data[1]} />
                                        <ReturnValuationItem {...this.state.data[3]} />
                                    </Col>
                                </Row>
                            </Col>
                            <Col span={8} style={{ borderLeft: '1px #CECECE solid' }}>
                                <Row>
                                    <Col span={22} offset={2}>
                                        <ReturnValuationItem {...this.state.data[4]} />
                                        <ReturnValuationItem {...this.state.data[5]} />
                                    </Col>
                                </Row>

                            </Col>
                        </Row>
                    ) : <Spin />
                }
            </Card>
        )

    }
}

ReturnValuation.defaultProps = {
    lPortId: null,
    returnValuation: [
        {
            "title": "最近三个月",
            "data": {
                "field": [
                    {
                        "name": "规模",
                        "id": "scale"
                    },
                    {
                        "name": "风格",
                        "id": "style"
                    }
                ],
                "list": [
                    {
                        "scale": "大盘",
                        "style": "价值型",
                        "value": 43.39
                    },
                    {
                        "scale": "大盘",
                        "style": "平衡型",
                        "value": 31.14
                    },
                    {
                        "scale": "大盘",
                        "style": "成长型",
                        "value": 1.98
                    },
                    {
                        "scale": "中盘",
                        "style": "价值型",
                        "value": 3.39
                    },
                    {
                        "scale": "中盘",
                        "style": "平衡型",
                        "value": 49
                    },
                    {
                        "scale": "中盘",
                        "style": "成长型",
                        "value": 2.78
                    },
                    {
                        "scale": "小盘",
                        "style": "价值型",
                        "value": 3.57
                    },
                    {
                        "scale": "小盘",
                        "style": "平衡型",
                        "value": 57.24
                    },
                    {
                        "scale": "小盘",
                        "style": "成长型",
                        "value": 16.98
                    }
                ]
            }
        },
        {
            "title": "最近一年",
            "data": {
                "field": [
                    {
                        "name": "规模",
                        "id": "scale"
                    },
                    {
                        "name": "风格",
                        "id": "style"
                    }
                ],
                "list": [
                    {
                        "scale": "大盘",
                        "style": "价值型",
                        "value": 43.39
                    },
                    {
                        "scale": "大盘",
                        "style": "平衡型",
                        "value": 31.14
                    },
                    {
                        "scale": "大盘",
                        "style": "成长型",
                        "value": 1.98
                    },
                    {
                        "scale": "中盘",
                        "style": "价值型",
                        "value": 3.39
                    },
                    {
                        "scale": "中盘",
                        "style": "平衡型",
                        "value": 49
                    },
                    {
                        "scale": "中盘",
                        "style": "成长型",
                        "value": 2.78
                    },
                    {
                        "scale": "小盘",
                        "style": "价值型",
                        "value": 3.57
                    },
                    {
                        "scale": "小盘",
                        "style": "平衡型",
                        "value": 57.24
                    },
                    {
                        "scale": "小盘",
                        "style": "成长型",
                        "value": 16.98
                    }
                ]
            }
        },
        {
            "title": "自市场高峰以来（2007年10月）",
            "data": {
                "field": [
                    {
                        "name": "规模",
                        "id": "scale"
                    },
                    {
                        "name": "风格",
                        "id": "style"
                    }
                ],
                "list": [
                    {
                        "scale": "大盘",
                        "style": "价值型",
                        "value": 43.39
                    },
                    {
                        "scale": "大盘",
                        "style": "平衡型",
                        "value": 31.14
                    },
                    {
                        "scale": "大盘",
                        "style": "成长型",
                        "value": 1.98
                    },
                    {
                        "scale": "中盘",
                        "style": "价值型",
                        "value": 3.39
                    },
                    {
                        "scale": "中盘",
                        "style": "平衡型",
                        "value": 49
                    },
                    {
                        "scale": "中盘",
                        "style": "成长型",
                        "value": 2.78
                    },
                    {
                        "scale": "小盘",
                        "style": "价值型",
                        "value": 3.57
                    },
                    {
                        "scale": "小盘",
                        "style": "平衡型",
                        "value": 57.24
                    },
                    {
                        "scale": "小盘",
                        "style": "成长型",
                        "value": 16.98
                    }
                ]
            }
        },
        {
            "title": "自市场低迷以来（2007年3月）",
            "data": {
                "field": [
                    {
                        "name": "规模",
                        "id": "scale"
                    },
                    {
                        "name": "风格",
                        "id": "style"
                    }
                ],
                "list": [
                    {
                        "scale": "大盘",
                        "style": "价值型",
                        "value": 43.39
                    },
                    {
                        "scale": "大盘",
                        "style": "平衡型",
                        "value": 31.14
                    },
                    {
                        "scale": "大盘",
                        "style": "成长型",
                        "value": 1.98
                    },
                    {
                        "scale": "中盘",
                        "style": "价值型",
                        "value": 3.39
                    },
                    {
                        "scale": "中盘",
                        "style": "平衡型",
                        "value": 49
                    },
                    {
                        "scale": "中盘",
                        "style": "成长型",
                        "value": 2.78
                    },
                    {
                        "scale": "小盘",
                        "style": "价值型",
                        "value": 3.57
                    },
                    {
                        "scale": "小盘",
                        "style": "平衡型",
                        "value": 57.24
                    },
                    {
                        "scale": "小盘",
                        "style": "成长型",
                        "value": 16.98
                    }
                ]
            }
        },
        {
            //"title": "当前市盈率与15年平均市盈率",
            "title": "当前市盈率VS 近15年平均市盈率",
            "data": {
                "field": [
                    {
                        "name": "规模",
                        "id": "scale"
                    },
                    {
                        "name": "风格",
                        "id": "style"
                    }
                ],
                "list": [
                    {
                        "scale": "大盘",
                        "style": "价值型",
                        "value": 43.39
                    },
                    {
                        "scale": "大盘",
                        "style": "平衡型",
                        "value": 31.14
                    },
                    {
                        "scale": "大盘",
                        "style": "成长型",
                        "value": 1.98
                    },
                    {
                        "scale": "中盘",
                        "style": "价值型",
                        "value": 3.39
                    },
                    {
                        "scale": "中盘",
                        "style": "平衡型",
                        "value": 49
                    },
                    {
                        "scale": "中盘",
                        "style": "成长型",
                        "value": 2.78
                    },
                    {
                        "scale": "小盘",
                        "style": "价值型",
                        "value": 3.57
                    },
                    {
                        "scale": "小盘",
                        "style": "平衡型",
                        "value": 57.24
                    },
                    {
                        "scale": "小盘",
                        "style": "成长型",
                        "value": 16.98
                    }
                ]
            }
        },
        {
            //"title": "现市盈率与15年平均市盈率",
            "title": "当前市盈率 / 近15年平均市盈率",
            "data": {
                "field": [
                    {
                        "name": "规模",
                        "id": "scale"
                    },
                    {
                        "name": "风格",
                        "id": "style"
                    }
                ],
                "list": [
                    {
                        "scale": "大盘",
                        "style": "价值型",
                        "value": 43.39
                    },
                    {
                        "scale": "大盘",
                        "style": "平衡型",
                        "value": 31.14
                    },
                    {
                        "scale": "大盘",
                        "style": "成长型",
                        "value": 1.98
                    },
                    {
                        "scale": "中盘",
                        "style": "价值型",
                        "value": 3.39
                    },
                    {
                        "scale": "中盘",
                        "style": "平衡型",
                        "value": 49
                    },
                    {
                        "scale": "中盘",
                        "style": "成长型",
                        "value": 2.78
                    },
                    {
                        "scale": "小盘",
                        "style": "价值型",
                        "value": 3.57
                    },
                    {
                        "scale": "小盘",
                        "style": "平衡型",
                        "value": 57.24
                    },
                    {
                        "scale": "小盘",
                        "style": "成长型",
                        "value": 16.98
                    }
                ]
            }
        }
    ]
}

export default connect()(ReturnValuation)
